<template>
	<view class="container">
		<view class="item bg-fff flex-space-between" @click="jump('/pages/mine/invoice/order')">
			<view class="">
				<view class="item-title">我的发票</view>
				<view class="item-tips">查看我的发票历史记录</view>
			</view>
			<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
		</view>
		
		<view class="item bg-fff flex-space-between" @click="jump('/pages/mine/invoice/list')">
			<view class="">
				<view class="item-title">发票抬头</view>
			</view>
			<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
		</view>
		
		<view class="item bg-fff flex-space-between" @click="show = true">
			<view class="">
				<view class="item-title">发票须知</view>
			</view>
			<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="16" height="900rpx">
			<view class="invoice">
				<view class="invoice-title">{{invoiceInfo.name}}</view>
				<view style="white-space: pre-wrap;">{{invoiceInfo.content}}</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				invoiceInfo: {
					name: "",
					content: "",
				},
			}
		},
		onLoad() {
			this.getHttp();
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			getConfigData() {
				uni.$u.api.getConfigData({
					type: 'invoice',
				}).then(res => {
					this.invoiceInfo = res.list[0];
				})
			},
			getHttp() {
				this.getConfigData();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		
		.item {
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 22rpx;
			
			.item-title {
				font-size: 32rpx;
				color: #333333;
			}
			
			.item-tips {
				font-size: 26rpx;
				color: #666262;
				margin-top: 12rpx;
			}
		}
		
		.invoice {
			padding: 20rpx;
			width: 600rpx;
			
			.invoice-title {
				margin-bottom: 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
			}
		}
	}
</style>
